<template>
  <view class="">
    <view class="wzkc_top">
      <u-search search-icon="" shape="square" placeholder="输入企业名称" v-model="searchObj.enterpriseName"
                :clearabled="true" :show-action="false" @input=""></u-search>
    </view>

    <view class="page">
      <mescroll-body top="100" class="scroll-box" ref="mescrollRef" @init="mescrollInit" :down="downOption"
                     @down="downCallback" @up="upCallback">
        <ListCol class="lease_list"
                 v-for="(item, index) in leaseialList"
                 :key="index"
        >
          <view @click="goInfo(item)">
            <view class="lease-t" >
              <view>
                {{item.enterpriseName}}
              </view>
            </view>
            <view class="lease-b">
              <view>退租日期：{{item.endTime}}</view>
              <view>账单总计 (元)：{{item.total}}</view>
            </view>
          </view>

        </ListCol>
      </mescroll-body>
    </view>

    <!--到期选择-->
    <u-select @confirm="maWareSelectFn" v-if="maWarehouseList.length>0" mode="single-column"
              v-model="showMaWarehouse" :list="maWarehouseList"></u-select>

  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import ListCol from "../../components/ListCol/ListCol";
export default {
  name:"refundList",
  components: {ListCol},
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      showMaWarehouse:false,
      searchObj: {
        recordState: '',
        enterpriseName:''
      },
      maWarehouseList:[
        {
          label:'全部',
          value:0
        },
        {
          label:'未到期',
          value:'未到期'
        },
        {
          label:'已到期',
          value:'已到期'
        }
      ],
      daoQiTxt:'全部',
      leaseialList: [],
      downOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        auto: false, //是否在初始化后,自动执行downCallback; 默认true
      },
    };
  },
  computed:{
    leaseDate(){
      return (item)=>{
        if (item&&item.beginTime&&item.endTime){
          let begin=item.beginTime.split(" ")[0]
          let end=item.endTime.split(" ")[0]
          return `${begin}到${end}`
        }else {
          return '-'
        }
      }

    }
  },
  onLoad(option) {
  },
  methods: {
    maWareSelectFn(item) {
      this.daoQiTxt = item[0].label
      if (this.daoQiTxt == "全部") {
        this.searchObj.recordState = ""
      } else {
        this.searchObj.recordState = item[0].value
      }
    },
    /*下拉刷新的回调 */
    downCallback() {
      this.leaseialList = [];
      this.mescroll.resetUpScroll();
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.apis.lifeApi
          .feApartmentCancelList({
            pageNum: page.num,
            pageSize: page.size,
            ...this.searchObj
          })
          .then((res) => {
            this.leaseialList = this.leaseialList.concat(res.rows);
            this.mescroll.endBySize(res.rows.length, res.total);
          })
          .catch(() => {
            //联网失败的回调,隐藏下拉刷新的状态
            this.mescroll.endErr();
          });
    },
    searchSubmit() {
      this.leaseialList = []
      this.mescroll.resetUpScroll();
    },
    goInfo(row) {
      uni.navigateTo({
        url: "./refundInfo?id=" + row.id,
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.wzkc_top {
  position: fixed;
  top: 0;
  /* #ifdef H5 */
  top: 88rpx;
  /* #endif */
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 10rpx 32rpx 20rpx;
  z-index: 10;
}

.ser_btn_box {
  padding-top: 10rpx;
  height: 90rpx;
  display: flex;
  .fen_col {
    margin-right: 10rpx;
    height: 60rpx;
    flex: 1;
    padding: 0 30rpx;
    background-color: #F5F5F5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    font-weight: 400;
    color: #333333;
    border-radius: 10rpx;

    &:last-child {
      margin-right: 0;
      color: #fff;
      background: #44D94B;
      justify-content: center;
    }
  }
}

.lease_list {
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  .lease-t{
    margin-bottom: 20px;
    display: flex;
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
  }
  .lease-b{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26rpx;
    font-weight: 500;
    color: #333333;
  }
}

</style>
